CSS 简介

CSS (Cascading Style Sheets) 用来设定网页元素的外观和布局（layout）。

通俗的说，就是让你的网页更好看。

比如：设置字体、颜色、大小、间距，网页里面标题栏导航栏主体页尾这些部分的布局位置等等

其实前面，我们就已经接触过 CSS 的语法，如下

<p class="title" style='color:green; font-size: 20px;'>白月黑羽日活用户突破3万</p>

这里面 style='color:green; font-size: 20px;' 就是css语句

color:green 告诉浏览器，这个元素里面的文字颜色是绿色，

font-size: 20px 指明了文字大小为 20个像素

CSS语句的位置

内联CSS

上面示例中， css描述就写在它针对的元素里面，作为元素的 style 属性，所以称之为 内联（inline style） 样式。

这种内联在元素里面的好处是：无需指定样式是针对哪个HTML元素的，在哪个元素里面，就是修饰哪个元素的。

但也有缺点：

缺点1：不能批量指定

比如

<p class="title" style='color:green; font-size: 20px;'>白月黑羽日活用户突破3万</p>
<p class="title" style='color:green; font-size: 20px;'>祝贺小班学员刘启明跳槽成功，薪资提升60%</p>
<p class="title" style='color:green; font-size: 20px;'>和小班学员交流英文对编程的重要性</p>

上面3条新闻的样式都是一样的，但是却要写3遍，太麻烦了！如果有100条，难道要写100遍？

而且如果要修改，也要全部都修改。

缺点2：样式（style）和页面结构（structure）混在一起，使得页面HTML看起来杂乱不清晰。

所以，我们推荐把style 分离出来，作为单独的样式表（CSS）。

单独的CSS 可以放在head里面，也可以作为外部 CSS 文件被页面引用。

head 里的 CSS

CSS 可以放在head里面，像这样

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>白月黑羽web教学</title>
  <style>
    p {
      color:green; font-size: 20px;
    }
  </style>
</head>

<body>

<h1>今日新闻</h1>
<p id='t1' class="title">白月黑羽日活用户突破3万</p>
<p id='t2' class="title">祝贺小班学员刘启明跳槽成功，薪资提升60%</p>
<p id='t3' class="title">和小班学员交流英文对编程的重要性</p>

</body>
</html>

比起内联的 CSS，只要指定一次即可。

怎么做到的？

仔细看，样式放在一个花括号里面，花括号前的表达式（本例中就是一个p），称之为 selector 选择器

这个 selector 非常重要，它指定了花括号里面的样式 是针对哪些元素 的。

如果我们把上例中的 p 改为 h1 , 就会发现它改变了 h1 的样式。

也可以根据id的值选择元素

#t1 {
  color:green; font-size: 20px;
}

根据 id 选择，前面要加一个井号

也可以根据class的值选择元素

.title {
  color:green; font-size: 20px;
}

根据 class 选择，前面要加一个点

selector 表达式的选择语法非常强大灵活，后面的教程会有详细的讲解。

外部CSS文件

我们还可以把CSS内容放到另外一个文件，比如 style.css，像这样

/* style.CSS 文件的内容 */
p {
  color:green; font-size: 20px;
}

然后在HTML页面文件中，指定外部CSS 的链接地址，如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>白月黑羽web教学</title>
  <!-- 这里指定外部css地址 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>今日新闻</h1>
<p class="title">白月黑羽日活用户突破3万</p>
<p class="title">祝贺小班学员刘启明跳槽成功，薪资提升60%</p>
<p class="title">和小班学员交流英文对编程的重要性</p>

</body>
</html>

那什么时候 CSS 应该放在 head 里，什么时候应该放在外部文件呢？

如果是下面这些情况，推荐放在外部

CSS 内容特别多

放在网页中会使得网页文件特别臃肿
CSS 内容对多个网页都适用

这时 CSS 独立出来，只需维护一份就可以，避免了重复性

CSS 注释

CSS 的注释可以像下面这样

/* style.css 文件的内容 */

p {
  color:green; font-size: 20px;
}

h1 {
  /* 不使用缺省大小，
  保证一致性 */
  color:green; font-size: 20px;
}

如果使用vscode ，选中要注释的内容按 Ctrl 键和 / 斜杆键，就可以自动产生注释了

div 元素

网页中 div （Division）元素非常常见。

它主要的作用是作为一批html元素的 容器，把它们包含在内。

然后对这个 div 元素做 CSS 样式指定，这样就对该div包含的内部元素整体做CSS样式的指定了。

比如

<h3>我们的教程有</h3>
<div style='border: 2px solid green; margin: 30px; padding: 20px; width:100px'>
  <p>白月黑羽<mark>Python</mark>教程</p>
  <p>白月黑羽<mark>自动化测试</mark>教程</p>
  <p>白月黑羽<mark>前端开发</mark>教程</p>
</div>

其中

border: 2px solid green 为 div元素设置边框，包围了整个div（包括内部元素）
margin: 30px; padding: 20px 指定外边距为 30px ，内边距为20px

大家可以修改一下值，看看显示上面的区别。

内外边距的概念，后面教程会有进一步的讲解
width:100px 指定div宽度为 100px，

所有内部的元素也受其影响，内容超过这个长度，就自动换行显示

如果不对div元素做任何的CSS设置， div 内部的这些元素，显示上没有什么不同。

浏览器查看修改 HTML/CSS

前端开发时，我们经常发现元素的显示效果和需要的有差异。

这时，需要在浏览器查看、修改 HTML元素和CSS。

可以在浏览器里按F12，打开开发者工具栏进行查看和调整 CSS

具体操作请看视频讲解

CSS 优先规则

有时你会发现，你写的针对元素的 CSS，实际运行时，却不起作用。

原因往往是：你的代码中存在多个适用于同一元素的 css规则，你期望生效的那个规则优先级没有另外一个高。

所以你要知道 css 规则的优先级

声明次序

如果你不小心写了下面这样的 html/css

<head>
  <style>
    h1 { 
      color: red; 
    }

    /* 这里 省略一批其它的css规则 */

    h1 { 
      color: green; 
    }   
  </style>
</head>

<body>
  <h1>白月黑羽今日信息</h1>
</body>

可以发现后面的规则覆盖了前面的规则

就像皇帝的圣旨都是 后旨压前旨 一样，后出现的规则优先级高于前面的规则

具体性

看下面这个例子

<head>
  <style>
    .main-heading { 
      color: red; 
    }

    h1 { 
      color: green; 
    }   
  </style>
</head>

<body>
  <h1 class="main-heading">白月黑羽今日信息</h1>
</body>

为什么最后生效的规则是第一个，而不是第二个呢？

因为通过 class 属性选择元素，比通过标签名指定元素，更加的具体确定，范围更小，所以优先级高。

选择元素的表达式越具体，优先级越高

再看这个例子

<head>
  <style>   
    .main-heading { 
      color: green; 
    }
  </style>
</head>

<body>
  <h1 class="main-heading" style="color:red">白月黑羽今日信息</h1>
</body>

为什么最后生效的规则是内联CSS，而不是头部里面的CSS呢？

因为内联比头部指定更具体（想一想为什么？），所以优先级高。

优先级规则是：　内联＞ head > 外部CSS

继承性

有些CSS 特性设置在上层元素，会被下层元素继承，比如 color 和 font-family

比如：

<body style="color: green;">
    <h3>白月黑羽 实战班</h3>

    <p style="color: blue">不是 上大班课的学习方式
        我们是 
        <span style="color: red">定制学习 + 实战练习 + 1对1 指导答疑</span>.
    </p>
</body>

如果我们去掉 span 里面的 color设置，如下

<body style="color: green;">
    <h3>白月黑羽 实战班</h3>

    <p style="color: blue">不是 上大班课的学习方式
        我们是 
        <span>定制学习 + 实战练习 + 1对1 指导答疑</span>.
    </p>
</body>

就可以发现，span元素继承了 p 里面指定的color，因为内部元素会继承上层元素的属性。

如果我们去掉 p 里面的 color设置，如下

<body style="color: green;">
    <h3>白月黑羽 实战班</h3>

    <p>不是 上大班课的学习方式
        我们是 
        <span>定制学习 + 实战练习 + 1对1 指导答疑</span>.
    </p>
</body>

就可以发现，span元素继承了 body 里面指定的color

有这样的优先性规则：越靠近该元素的CSS指定，优先级越高

所以，body、p 同时指定color时，更靠近 span 的 p 的CSS 赢得优先

body、p、span 同时指定color时， span 自身的CSS 赢得优先

但是有些CSS 特性是不能被继承的，比如 width

如果一个上层div元素的设置了 width 为 1000px ，

内部元素不会继承这个特性，否则内部的图片/视频/p等等全都是 1000px宽度，就乱套了

还是以上面的代码为例

<h3>我们的教程有</h3>
<div style='border: 2px solid green; margin: 30px; padding: 20px; width:100px'>
  <p>白月黑羽<mark>Python</mark>教程</p>
  <p>白月黑羽<mark>自动化测试</mark>教程</p>
  <p>白月黑羽<mark>前端开发</mark>教程</p>
</div>

可以发现 width , margin, padding, border 是不会被继承的，否则下面的元素都会有相同的宽度边框间距了

!important

再看这个例子

<head>
  <style>   
    h1 { 
      color: green; 
    }
  </style>
</head>

<body>
  <h1 class="main-heading" style="color:red">白月黑羽今日信息</h1>
</body>

前面说过，优先级规则是：　内联＞ head > 外部CSS

但是如果你想专门把 head里面的这个 color CSS 优先级提高，

可以在head里面使用 !important 提高其优先级

这样

<head>
  <style>   
    h1 { 
      color: green !important;
    }
  </style>
</head>

<body>
  <h1 class="main-heading" style="color:red">白月黑羽今日信息</h1>
</body>

就会发现，head里面的设置覆盖了内联指定。